<template>
	<div>
		<div class="text-white font40 wrap-x wrap-flex-end" style="position: absolute; z-index: 1; right: 0px;">
			<div class="text-white borderRadius">晚会在线:{{rsize}}人数</div>
		</div>
		<div v-show="showcurrent" class="borderRadius text-white"
			style="height: 80vh; width: 80vw; z-index: 1; background-color:transparent; position: absolute; top: 10vh; left: 10vw; display: flex; flex-direction: column; justify-content: center; align-items: center;">
			<div style="font-size: 100px;">{{broadcast.serialnumber}}.{{broadcast.program_name}}</div>
			<div class="font40 margin-top-xl">表演人:{{broadcast.starring}}</div>
		</div>

		<div v-show="Raffle" class="borderRadius text-white"
			style="height: 80vh; width: 80vw; z-index: 1; background-color:transparent; position: absolute; top: 5vh; left: 10vw; display: flex; flex-direction: column; justify-content: center;  align-items: center;">
			<div style="font-size: 100px;">当前人数:{{rsize}}</div>
			<div class="font40 margin-top-xl">抽奖人数:{{rsize}}</div>
			<div class="font40 margin-top-xl">本次随机奖品如下</div>
			<div class="font40 margin-top-xl wrap-x" style=" flex-wrap: wrap; justify-content: flex-start;">
				<div v-for="(item,index) in searchList" :key="index" class="wrap-x padding-tb-sm"
					style="border: 1px solid white; width: 25vw; align-items: center;">
					<img :src="item.prizes_imgage" style="width: 80px; height: 80px;"
						class="margin-left-sm borderRadius" />
					<div class="margin-left-sm">{{item.prizes}}</div>
				</div>
			</div>
		</div>

		<div v-show="Lucky" class="borderRadius text-white"
			style="height: 80vh; width: 80vw; z-index: 1; background-color:transparent; position: absolute; top: 5vh; left: 10vw; display: flex; flex-direction: column; justify-content: center;  align-items: center;">
			<div style="font-size: 100px;">恭喜幸运观众</div>
			<!-- <div class="font40 margin-top-xl">参与抽奖人数:{{rsize}}</div> -->
			<!-- <div class="font40 margin-top-xl"></div> -->
			<div class="font24 margin-top-xl wrap-x" style=" flex-wrap: wrap; justify-content: flex-start;">
				<div v-for="(item,index) in programList" :key="index" class="wrap-x padding-tb-sm padding-left-sm"
					style="border: 1px solid white; width: 25vw; align-items: center;">
					<img :src="item.portrait" style="width: 80px; height: 80px;"
						class="margin-lr-sm borderRadius" />抽中了:
					<div class="margin-left-sm">{{item.prizes}}</div>
				</div>
			</div>
		</div>
		<!-- 	<div v-show="showhander" class="borderRadius text-white"
			style="transition: 2s; height: 80vh; width: 80vw; z-index: 1; background-color:transparent; position: absolute; top: 5vh; left: 10vw; display: flex; flex-direction: column; justify-content: center;  align-items: center;">
			<div style="font-size: 100px;" class="margin-tb-sm">绚丽之星</div>
		</div> -->

		<div v-show="andRaffle" class="borderRadius text-white"
			style="transition: 2s; height: 80vh; width: 80vw; z-index: 1; background-color:transparent; position: absolute; top: 5vh; left: 10vw; display: flex; flex-direction: column; justify-content: center;  align-items: center;">
			<div style="font-size: 100px;" class="margin-tb-sm">正在抽取幸运观众</div>
			<div ref="qrcode" class="wrap-y wrap-center">
				<SlotMachine ref="myLucky" width="80vw" height="300px" :prizes="prizes" :blocks="blocks" :slots="slots"
					:defaultConfig="defaultConfig" />
			</div>
		</div>

		<div style="width: 100%;" class="imgs">
			<vue-danmaku ref="aaa" :danmus="danmus" randomChannel use-slot :channels="10" class="viewHei text-white"
				style="width:100%; height: 100vh;">
				<template v-slot:dm="dan">
					<div class="wrap-x wrap-center">
						<img :src="dan.danmu.portrait" style="height: 80px; width: 80px; border-radius: 50px;" />
						<div class="margin-left-sm font32" :style="{color:dan.danmu.color}">
							{{dan.danmu.message}}
						</div>
					</div>
				</template>
				<img :src="imgUrl" style=" width: 100%; height: 100vh;" v-if="imgUrl" />
			</vue-danmaku>


			<!-- <vue-danmaku :danmus="danmus" randomChannel class="viewHei text-white" style="width:100%; height: 100vh;"
				extraStyle="color:#ffffff;" ref="danmaku" :fontSize="35"> -->
			<!-- <img :src="imgUrl" style=" width: 100%; height: 100vh;" v-if="imgUrl" /> -->
			<!-- </vue-danmaku> -->


			<el-dialog title="扫码进入小程序" center :visible.sync="dialogVisible" width="600px">
				<div ref="qrcode" class="wrap-y wrap-center padding-bottom-xl">
					<img src="../assets/1702709780139.png" style="width: 300px; height: 300px;" />
				</div>
			</el-dialog>
		</div>
	</div>
</template>
<script>
	import Vue from "vue";
	import vueDanmaku from 'vue-danmaku'
	import QRCode from "qrcodejs2"
	import userLogin from './login.vue';
	import axios from "axios";
	Vue.component('userLogin', userLogin);
	export default {
		components: {
			vueDanmaku
		},
		name: "index",
		data() {
			return {
				showhander: false,
				Lucky: false,
				showUser: false,
				searchList: [], //奖品信息
				fortune: false,
				Raffle: false,
				andRaffle: false,
				showDate: false,
				showprogram: false,
				showcurrent: false,
				danmus: [],
				data: [],
				userListt: {
					partyid: 1,
					pageNum: 1,
					pageSize: 10
				},
				username: '',
				socket: null,
				dialogVisible: false,
				// notLogin: true,
				number: 0,
				userData: JSON.parse(localStorage.getItem('userData')),
				Id: '',
				partyid: '',
				customer: 11,
				imgUrl: 'https://bzbookpicture.oss-cn-beijing.aliyuncs.com/38640ad595ca48b3bc9329dc4ae9e69b.jpg',
				rsize: 0,
				programList: {},
				broadcast: {},
				blocks: [{
						padding: '30px',
						background: '#869cfa',
						borderRadius: '20px',
						imgs: [{
							width: '100%',
							src: 'https://bzbookpicture.oss-cn-beijing.aliyuncs.com/0aea45babc3a4102b1f3f196c73e77e8.jpg'
						}]
					},
					{
						padding: '20px',
						background: '#000000'
					},
				],
				slots: [{}, {}, {}, {}, {}],
				prizes: [{
					id: 1,
					borderRadius: '30px',
					imgs: [{
						width: '60%',
						top: '20%',
						src: 'https://bzbookpicture.oss-cn-beijing.aliyuncs.com/86e8d366cedc42e9bf0eb7f3e681beeb.png'
					}]
				}, {
					id: 1,
					borderRadius: '30px',
					imgs: [{
						width: '60%',
						top: '20%',
						src: 'https://bzbookpicture.oss-cn-beijing.aliyuncs.com/86e8d366cedc42e9bf0eb7f3e681beeb.png'
					}]
				}, {
					id: 1,
					borderRadius: '30px',
					imgs: [{
						width: '60%',
						top: '20%',
						src: 'https://bzbookpicture.oss-cn-beijing.aliyuncs.com/86e8d366cedc42e9bf0eb7f3e681beeb.png'
					}]
				}, {
					id: 1,
					borderRadius: '30px',
					imgs: [{
						width: '60%',
						top: '20%',
						src: 'https://bzbookpicture.oss-cn-beijing.aliyuncs.com/86e8d366cedc42e9bf0eb7f3e681beeb.png'
					}]
				}, {
					id: 1,
					borderRadius: '30px',
					imgs: [{
						width: '60%',
						top: '20%',
						src: 'https://bzbookpicture.oss-cn-beijing.aliyuncs.com/86e8d366cedc42e9bf0eb7f3e681beeb.png'
					}]
				}],
				defaultConfig: {
					rowSpacing: '0px',
					colSpacing: '0px'
				}
			}
		},
		destroyed() {
			this.off()
		},
		methods: {
			end() {
				// console.log(this.$refs.danmaku);
			},
			showText() { //显示二维码
				this.dialogVisible = true
				// this.$nextTick(() => {
				// 	if (this.qrcode == null) {
				// 		this.qrcode = new QRCode(this.$refs.qrcode, {
				// 			width: 256,
				// 			height: 256,
				// 			text: "http://192.168.31.89:8080"
				// 		})
				// 	}
				// })
			},
			init() {
				this.socket = new WebSocket("ws://47.113.202.41:9090/api/socket/1/0" + '/' + this.customer)
				this.socket.onerror = this.bbb
				this.socket.onopen = this.open
				this.socket.onmessage = this.get
			},
			open() {
				this.$message.success("连接成功");
			},
			get(msg) { //监听用户WebSocket的数据
				let data = JSON.parse(msg.data)
				console.log(data)
				if (data.hasOwnProperty('data')) {
					let obj = data.data
					if (obj.code == 366) {
						this.showText()
					} else if (obj.code == 355) {
						this.dialogVisible = false
					} else if (obj.code == 505) { //晚会当前节目  //获取到之后在那参数去请求当前节目的信息
						this.showcurrent = true
						let from = {
							id: obj.id,
							partyid: obj.partyid
						}
						axios.post("http://47.113.202.41:9091/admin/program/detail", from).then(res => {
							this.broadcast = res.data.data
							console.log(this.broadcast)
						})
					} else if (obj.code == 66) {
						this.imgUrl = obj.imgUrl
						console.log(this.imgUrl)
					} else if (obj.code == 10) {
						this.$router.push("/login");
					} else if (obj.code == 301) {
						this.showprogram = true
						let from = {
							partyid: obj.partyid,
						}
						axios.post("http://47.113.202.41:9091/admin/program/rendering", from).then(res => {
							this.programList = res.data.data
							console.log(this.programList)
						})
					} else if (obj.code == 302) {
						this.showprogram = false
					} else if (obj.code == 303) {
						this.showcurrent = true
					} else if (obj.code == 304) {
						this.showcurrent = false
					} else if (obj.code == 305) { //显示抽奖
						this.Raffle = true
						this.andRaffle = false
						let from = {
							partyid: obj.partyid,
							pageNum: 1,
							pageSize: 10
						}
						axios.post("http://47.113.202.41:9091/admin/luckydraw/search", from).then(res => {
							this.searchList = res.data.data
						})
					} else if (obj.code == 3066) { //关闭抽奖
						this.Raffle = false
						this.andRaffle = false
					} else if (obj.code == 502) { //查看中奖用户
						this.Raffle = false
						this.andRaffle = false
						this.Lucky = true
						axios.post("http://47.113.202.41:9091/admin/luckydraw/lottery", this.userListt).then(res => {
							this.programList = res.data.data
						})
					} else if (obj.code == 501) { //隐藏中奖用户
						this.Lucky = false
					} else if (obj.code == 306) { //开始抽奖
						this.Raffle = false //隐藏信息
						this.andRaffle = true //显示抽奖

						setTimeout(() => {
							let from = {
								partyid: obj.partyid,
								winningnumber: obj.winningnumber
							}
							axios.post("http://47.113.202.41:9091/admin/luckydraw/galainformation", from)
								.then(res => {
									this.slots = []
									this.prizes = []
									for (var i = 0; i < obj.winningnumber; i++) { //根据人数随机生成滑动速度
										var randomNumber = Math.floor(Math.random() * 20) + 30;
										this.slots.push({
											speed: randomNumber
										})
									}
									for (var i = 0; i < res.data.data.length; i++) {
										this.prizes.push({
											id: res.data.data[i].id,
											borderRadius: '30px',
											imgs: [{
												width: '60%',
												top: '20%',
												src: res.data.data[i].portrait
											}]
										})
									}
									this.$refs.myLucky.play()
								})
						}, 1000)

					} else if (obj.code == 307) { //停止抽奖
						let from = {
							partyid: obj.partyid,
							winningnumber: obj.winningnumber
						}
						axios.post("http://47.113.202.41:9091/admin/luckydraw/user", from).then(res => {
							let myobj = []
							this.prizes = []
							for (var i = 0; i < res.data.data.length; i++) {
								this.prizes.push({
									id: res.data.data[i].id,
									borderRadius: '30px',
									imgs: [{
										width: '60%',
										top: '20%',
										src: res.data.data[i].portrait
									}]
								})
								// for (var j = 0; j < this.prizes.length; j++) {
								// 	if (res.data.data[i].id == this.prizes[j].id) {
								// 		this.prizes.push({
								// 			id: res.data.data[i].id,
								// 			borderRadius: '30px',
								// 			imgs: [{
								// 				width: '60%',
								// 				top: '20%',
								// 				src: res.data.data[i].portrait
								// 			}]
								// 		})
								// 		// this.prizes[i].imgs.src = res.data.data[i].
								// 		// console.log(this.prizes[i].imgs[i].src)

								// 		// console.log(res.data.data[i].id)
								// 		// myobj.push(j)
								// 		// console.log(myobj[j])
								// 	}
								// }
								myobj.push(i)
							}
							this.$refs.myLucky.stop(myobj)

						})
					}
				}
				if (data.message != undefined) {
					this.danmus.push(data)
					console.log(data)
				} else if (data.number != undefined) {
					this.rsize = data.number
				}
			},
			off() { //关闭服务
				this.socket.close
			}
		},
		created() {
			if (this.userData == null) {
				this.$router.push("/login");
				this.$message.error("请先登录")
			} else {
				this.init()
			}
		},
		mounted() {
			this.$refs.aaa.play()
			// this.$refs.myLucky.init()
		}
	}
</script>

<style scoped>
	.imgs {
		background-color: black;
	}
</style>